import React, { useState } from "react";
import style from "./SwiperCom.module.css";
import logo from "./images/logo.png";
// 导入Ant Design图标（需先安装@ant-design/icons）
import { SearchOutlined } from "@ant-design/icons";
import { Carousel } from "antd";
import s1 from "./images/s1.png";
import s2 from "./images/s2.png";
import s3 from "./images/s3.png";
import s4 from "./images/s4.png";
import s5 from "./images/s5.png";
import s6 from "./images/s6.png";
import bg1 from "./images/1.png";
import bg2 from "./images/2.png";
import bg3 from "./images/3.png";
import { useNavigate } from "react-router-dom";

function SwiperCom() {
  const [searchValue, setSearchValue] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("全部");
  const [activeIndex, setActiveIndex] = useState(0);
const navigate=useNavigate()
  const getBackgroundImage = (index: number) => {
    if (index === 2) return bg2;
    if (index === 3) return bg3;
    return bg1;
  };

  // 分类选项数据
  const categories = ["全部", "摄影图", "视频", "音频", "PPT模板"];

  return (
    <div
      className={style.swiperContainer}
      style={{
        backgroundImage: `url(${getBackgroundImage(activeIndex)})`,
        backgroundSize: "cover",
        backgroundPosition: "center center",
      }}
    >
      {/* 左侧搜索区域 */}
      <div className={style.swiperLeft}>
        <img src={logo} alt="包图网Logo" className={style.logo} />
        <div className={style.searchContainer}>
          {/* 分类下拉选择 */}
          <div className={style.categoryDropdown}>
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className={style.select}
            >
              {categories.map((category) => (
                <option key={category} value={category}>
                  {category}
                </option>
              ))}
            </select>
          </div>

          {/* 搜索输入框 */}
          <input
            type="text"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            placeholder="百万视频上新，点击搜索查看"
            className={style.searchInput}
          />

          {/* 搜索按钮 */}
          <button className={style.searchButton} onClick={()=>navigate('/Look')}>
            <SearchOutlined /> 搜索
          </button>
        </div>
      </div>

      {/* 右侧轮播区域 */}
      <div className={style.swiperRight}>
        <Carousel
          effect="fade"
          autoplay
          dotPosition="right"
          beforeChange={(current) => setActiveIndex(current)}
        >
          {[s1, s2, s3, s4, s5, s6].map((imgSrc, index) => (
            <img src={imgSrc} alt={`轮播图${index + 1}`} />
          ))}
        </Carousel>
      </div>
    </div>
  );
}

export default SwiperCom;
